* {
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    background: rgba(225,255,255,1.0);
    background-position: center top;
    background-repeat: repeat-y;
}

body {
    width: 950px;
    margin: 0 auto;
}

body, input, textarea, button {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 20px;
    color: #444444;
}

.page {
    background: white;
    position: relative;
    min-width: 900px;
    padding: 20px;
    border-radius: 16px;
    -moz-border-radius: 16px;
    border: #ccc 1px solid;
}

.page .index .index-left {
    width: 680px;
    padding-right: 20px;
    float: left;
    border-right: 1px dashed #678A9D;
}

.page .index .index-right {
    width: 160px;
    float: right;
}

.footer {
    color: #00482F;
}

.footer .footer-links {
    text-align: center;
    padding: 8px;
}

.footer .footer-links a {
    padding: 8px;
    font-size: 16px;
    letter-spacing: 1px;
}


.w60 { width: 540px; }
.w45 { width: 405px; }
.w40 { width: 360px; }


a {
    color: #008758;
    text-decoration: none;
    cursor: pointer;
}

a:hover { color: #006641; }

a[enabled="false"] {
    cursor: default;
}

#objectives a, #card-decks a, #curricula a { color: #72B49D; }

button, input[type="submit"] {
    padding: 4px;
    margin: 4px 0;
    border: 1px solid #000000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    background: #AAFFAA;
    cursor: pointer;
}

input[type="file"] {
    padding: 8px 0 0 0;
    zoom: 128%;
    font-size: 16px;
    width: 320px;
    height: 30px;
}

button:active, input[type="submit"]:active {
    background: #FFFFAA;
}

button[enabled="false"] {
    background: #DDDDDD;
}

input[type="text"], input[type="password"] {
    height: 24px;
    padding: 2px 4px;
    margin: 4px;
    border: 1px solid #ccc;
    border-radius: 8px;
    -moz-border-radius: 8px;
}

input[type="text"].error, input[type="password"].error {
    background: #ffffcc;
}

select {
    height: 32px;
    padding: 2px 4px;
    margin: 4px;
    font-size: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

#create-game-form select {
    width: 232px;
}

.popup {
    display: none;
    position: absolute;
    padding:  20px;
    background: #ffffff;
    border-radius: 20px;
    -moz-border-radius: 20px;
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.10);
}

.popup-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    text-align: center;
    background: #777777;
    border: 1px solid #999999;
    border-radius: 20px;
    -moz-border-radius: 20px;
    font-family: arial, sans-serif;
    font-weight: bolder;
    font-size: 24px;
    text-align: center;
}

.popup-close a {
    font-size: 24px;
    color: #ffffff;
}

.popup-close a:hover {
    text-decoration: none;
    color: #ff0000;
    cursor: pointer;
}

.scroll {
    overflow-y: scroll;
    border-top: 1px dashed #666666;
    border-bottom: 1px dashed #666666;
}

.clear { clear: both; }
.a-left { text-align : left; }
.a-center { text-align : center; }
.a-right { text-align : right; }
.a-top { vertical-align : top; }
.a-middle { vertical-align : middle; }
.a-bottm { vertical-align : bottom; }

.d-none { display : none; }
.d-inline { display : inline; }
.f-left { float : left; }
.f-right { float : right; }

.p-relative { position : relative; }
.p-absolute { position : absolute; }
.p-fixed { position : fixed; }
.s12 { height : 12px; width : 12px; }
.t-row { display : table-row; }
.t-cell { display : table-cell; }

.i { font-style : italic; }
.b { font-weight : bold; }

h1 {}
h2 {}
h3 { padding-bottom: 8px; }
h4 { padding-bottom: 4px; }
h5 { padding: 4px 0; }
h6 { padding: 4px 0; }
p, ul, li { padding: 4px 0; font-size: 20px; color: #444444; }
p.footnote { font-size: 16px; }
p.small, a.small, span.small  { font-size: 16px; }
p.normal, a.normal, span.normal { font-size: 20px; }
p.large, a.large, span.large { font-size: 24px; }
p.xlarge, a.xlarge, span.xlarge { font-size: 28px; }
p.xxlarge, a.xxlarge, span.xxlarge { font-size: 32px; }
p.caption { font-size: 12px; }
span.u { text-decoration: underline; }
li { margin: 0 0 0 32px; }
ul.small li { font-size: 16px; }
hr { margin: 4px 0; padding: 4px;  border-top: 1px dashed #003F29; }

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.border-1 {
    border:1px solid #ccc;
    border-radius: 16px;
    -moz-border-radius: 16px;
}

.border-2 {
    border:2px dashed #ccc;
    border-radius: 120px;
    -moz-border-radius: 80px;
}

#lessons {
    border: #ccc 1px solid;
    border-radius: 16px;
    -moz-border-radius: 16px;
    padding: 16px;
}